<template>
  <context-menu v-model:show="show" :options="optionsComponent">
    <context-menu-item
      label="复制"
      @click="onMenuClick('copy')"
      v-if="!ifCanvas"
    >
      <template #icon>
        <el-icon size="17"><CopyDocument /></el-icon> </template
    ></context-menu-item>

    <context-menu-item
      label="粘贴"
      :disabled="!canPaste"
      @click="onMenuClick('paste')"
    >
      <template #icon>
        <el-icon size="17"><Tickets /></el-icon>
      </template>
    </context-menu-item>

    <context-menu-item
      label="剪切"
      @click="onMenuClick('cut')"
      v-if="!ifCanvas"
    >
      <template #icon>
        <el-icon size="17"><Scissor /></el-icon>
      </template>
    </context-menu-item>

    <context-menu-item
      label="置顶"
      v-if="!ifCanvas"
      @click="onMenuClick('top')"
    >
      <template #icon>
        <el-icon size="17"><Top /></el-icon>
      </template>
    </context-menu-item>
    <context-menu-item
      label="置底"
      v-if="!ifCanvas"
      @click="onMenuClick('bottom')"
    >
      <template #icon>
        <el-icon size="17"><Bottom /></el-icon>
      </template>
    </context-menu-item>
    <context-menu-item
      label="上移"
      :disabled="!canUp"
      v-if="!ifCanvas"
      @click="onMenuClick('up')"
    >
      <template #icon>
        <el-icon size="17"><ArrowUp /></el-icon>
      </template>
    </context-menu-item>
    <context-menu-item
      label="下移"
      v-if="!ifCanvas"
      :disabled="!canDown"
      @click="onMenuClick('down')"
    >
      <template #icon>
        <el-icon size="17"><ArrowDown /></el-icon>
      </template>
    </context-menu-item>

    <context-menu-item
      label="删除"
      @click="onMenuClick('delete')"
      v-if="!ifCanvas"
    >
      <template #icon>
        <el-icon size="17"><Delete /></el-icon>
      </template>
    </context-menu-item>
    <context-menu-item
      label="组合"
      @click="onMenuClick('combine')"
      v-if="canCombine && !ifCanvas"
    >
      <template #icon>
        <el-icon size="17"><Coin /></el-icon>
      </template>
    </context-menu-item>
    <context-menu-item
      label="解除组合"
      @click="onMenuClick('cancleCombine')"
      v-if="!canCombine && !ifCanvas"
    >
      <template #icon>
        <el-icon size="17"><SuitcaseLine /></el-icon> </template
    ></context-menu-item>
    <context-menu-item label="清空画布" @click="onMenuClick('clear')">
      <template #icon>
        <el-icon size="17"><RefreshLeft /></el-icon>
      </template>
    </context-menu-item>
  </context-menu>
</template>

<script lang="ts" setup>
import { ref } from "vue";

//导入组件
import { ContextMenu, ContextMenuItem } from "@imengyu/vue3-context-menu";
let props = defineProps({
  layouts: {
    type: Array,
    default: () => [],
  },
});
let canPaste = ref(false);
let canUp = ref(true);
let canDown = ref(true);
let canCombine = ref(true);
let ifCanvas = ref(false);
let show = ref(false);
let optionsComponent = ref({
  zIndex: 3,
  theme: "default dark",
  x: 500,
  y: 200,
});
let emit = defineEmits(["operation"]);
let currentItem = ref(null);
function onContextMenu(e: MouseEvent) {
  // console.log("e", e);
  // console.log("e", e.target);
  // console.log("e", e.currentTarget);
  let id = (e.currentTarget as any).dataset.id;
  if (id) {
    ifCanvas.value = false;
    let item: any = props.layouts.find((item: any) => item.id == id);

    currentItem.value = item;

    if (item && item.componentName == "combineGroup") {
      canCombine.value = false;
    } else {
      canCombine.value = true;
    }
  } else {
    ifCanvas.value = true;
  }
  e.preventDefault();
  //Set the mouse position
  optionsComponent.value.x = e.x;
  optionsComponent.value.y = e.y;
  //Show menu
  show.value = true;
}
const onMenuClick = (type) => {
  emit("operation", { type, id: currentItem.value?.id || "" });
};
defineExpose({
  show,
  onContextMenu,
  canUp,
  canDown,
  canPaste,
});
</script>

<style scoped lang="scss"></style>
